<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block UI 加载提示 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
<div class="row">
    <div class="col">
        <div class="alert alert-light alert-elevate fade show" role="alert">
            <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
            <div class="alert-text">
                jQuery BlockUI一般用于ajax操作时锁定页面中内容防止用户在请求响应前操作
                <a class="e-link e-font-bold" href="http://jquery.malsup.com/block/" target="_blank">官方文档</a>
                <a class="e-link e-font-bold" href="https://github.com/malsup/blockui" target="_blank">Github</a>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xl-6">

        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        基础
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        点击下方按钮，内容区域将会添加等待状态
                    </span>
                    <div class="e-section-content">
                        <p style="padding: 20px; margin: 10px 0 30px 0; border: 4px solid #efefef" id="block-ui-1-content">
                            等待状态一般用于页面处于加载中或者Ajax操作耗时较长时使用，防止用户触发操作时不知道自己有没有点击&重复触发等场景。
                            使用时请考虑实际场景，尽量设置在小范围元素。
                        </p>
                        <button type="button" class="btn btn-brand" id="block-ui-1-1">图标1</button>
                        <button type="button" class="btn btn-brand" id="block-ui-1-3">图标2</button>
                        <button type="button" class="btn btn-brand" id="block-ui-1-2">带背景色遮罩&大尺寸遮罩&大尺寸</button>
                        <button type="button" class="btn btn-brand" id="block-ui-1-4">自定义文字&颜色</button>
                        <button type="button" class="btn btn-brand" id="block-ui-1-5">自定义文字&颜色</button>
                    </div>
                </div>

                <!--end::Section-->
                <div class="e-separator e-separator--dashed"></div>
            </div>
        </div>

        <!--end::Portlet-->

        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        在模态框中使用
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        点击下方按钮弹出模态框后点击确定
                    </span>
                    <div class="e-section-content">
                        <button type="button" class="btn btn-brand" data-toggle="modal"
                                data-target="#block-ui-4-1-modal">图标1
                        </button>
                        <button type="button" class="btn btn-brand" data-toggle="modal"
                                data-target="#block-ui-4-3-modal">图标2
                        </button>
                        <button type="button" class="btn btn-brand" data-toggle="modal"
                                data-target="#block-ui-4-2-modal">带背景色遮罩&大尺寸
                        </button>
                        <button type="button" class="btn btn-brand" data-toggle="modal"
                                data-target="#block-ui-4-4-modal">自定义文字&颜色
                        </button>
                        <button type="button" class="btn btn-brand" data-toggle="modal"
                                data-target="#block-ui-4-5-modal">自定义文字&颜色
                        </button>
                    </div>
                </div>
                <!--end::Section-->
            </div>
        </div>

        <!--end::Portlet-->
    </div>
    <div class="col-xl-6">

        <!--begin::Portlet-->
        <div class="card" id="block-ui-2-portlet">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        在面板中使用
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        点击下方按钮，当前面板会被设置为等待状态
                    </span>
                    <div class="e-section-content">
                        <button type="button" class="btn btn-brand" id="block-ui-2-1">图标1</button>
                        <button type="button" class="btn btn-brand" id="block-ui-2-3">图标2</button>
                        <button type="button" class="btn btn-brand" id="block-ui-2-2">带背景色遮罩&大尺寸遮罩</button>
                        <button type="button" class="btn btn-brand" id="block-ui-2-4">自定义文字&颜色</button>
                        <button type="button" class="btn btn-brand" id="block-ui-2-5">自定义文字&颜色</button>
                    </div>
                </div>

                <!--end::Section-->
                <div class="e-separator e-separator--dashed"></div>
            </div>
        </div>

        <!--end::Portlet-->

        <!--begin::Portlet-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        页面
                    </h3>
                </div>
            </div>
            <div class="card-body">

                <!--begin::Section-->
                <div class="e-section">
                    <span class="e-section-info">
                        点击下方按钮，当前页面会被设置为等待状态
                    </span>
                    <div class="e-section-content">
                        <button type="button" class="btn btn-brand" id="block-ui-3-1">图标1</button>
                        <button type="button" class="btn btn-brand" id="block-ui-3-3">图标2</button>
                        <button type="button" class="btn btn-brand" id="block-ui-3-2">带背景色遮罩&大尺寸遮罩</button>
                        <button type="button" class="btn btn-brand" id="block-ui-3-4">自定义文字&颜色</button>
                        <button type="button" class="btn btn-brand" id="block-ui-3-5">自定义文字&颜色</button>
                    </div>
                </div>
                <!--end::Section-->
                <div class="e-separator e-separator--dashed"></div>
            </div>
        </div>

        <!--end::Portlet-->
    </div>
</div>

<!--begin::Modal-->
<div class="modal fade" id="block-ui-4-1-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">写消息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label class="form-control-label">主题：</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">内容：</label>
                        <textarea class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-brand" id="block-ui-4-1">确定</button>
            </div>
        </div>
    </div>
</div>

<!--end::Modal-->

<!--begin::Modal-->
<div class="modal fade" id="block-ui-4-2-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">写消息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label class="form-control-label">主题：</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">内容：</label>
                        <textarea class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-brand" id="block-ui-4-2">确定</button>
            </div>
        </div>
    </div>
</div>

<!--end::Modal-->

<!--begin::Modal-->
<div class="modal fade" id="block-ui-4-3-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">写消息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label class="form-control-label">主题：</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">内容：</label>
                        <textarea class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-brand" id="block-ui-4-3">确定</button>
            </div>
        </div>
    </div>
</div>

<!--end::Modal-->

<!--begin::Modal-->
<div class="modal fade" id="block-ui-4-4-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">写消息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label class="form-control-label">主题：</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">内容：</label>
                        <textarea class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-brand" id="block-ui-4-4">确定</button>
            </div>
        </div>
    </div>
</div>

<!--end::Modal-->

<!--begin::Modal-->
<div class="modal fade" id="block-ui-4-5-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">写消息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label class="form-control-label">主题：</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">内容：</label>
                        <textarea class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-brand" id="block-ui-4-5">确定</button>
            </div>
        </div>
    </div>
</div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->

<!--str:: 页面js -->
<script src="/assets/js/demo1/pages/ui/assembly/block-ui.js" type="text/javascript"></script>
<!--str:: 页面js -->
</body>
</html>